<template>
  <div class="flex">
    <aCard title="基本用法">
      <a-input
        :style="{ width: '320px' }"
        placeholder="Please enter something"
        allow-clear
      />
      <a-input
        :style="{ width: '320px' }"
        default-value="content"
        placeholder="Please enter something"
        allow-clear
      />
    </aCard>
    <aCard title="输入框状态">
      <a-input
        :style="{ width: '320px' }"
        placeholder="Disabled status"
        disabled
      />
      <a-input
        :style="{ width: '320px' }"
        default-value="Disabled"
        placeholder="Disabled status"
        disabled
      />
      <a-input :style="{ width: '320px' }" placeholder="Error status" error />
    </aCard>
    <aCard title="输入框尺寸">
      <a-input
        :style="{ width: '320px' }"
        placeholder="Please enter something"
        size="mini"
        allow-clear
      />
      <a-input
        :style="{ width: '320px' }"
        placeholder="Please enter something"
        size="small"
        allow-clear
      />
      <a-input
        :style="{ width: '320px' }"
        placeholder="Please enter something"
        size="medium"
        allow-clear
      />
      <a-input
        :style="{ width: '320px' }"
        placeholder="Please enter something"
        size="large"
        allow-clear
      />
    </aCard>

    <aCard title="前缀与后缀">
      <a-input
        :style="{ width: '320px' }"
        placeholder="Please enter something"
        allow-clear
      >
        <template #prefix>
          <a-icon name="xihuan"></a-icon>
        </template>
      </a-input>
      <a-input
        :style="{ width: '320px' }"
        placeholder="Please enter something"
        allow-clear
      >
        <template #suffix>
          <a-icon name="xihuan"></a-icon>
        </template>
      </a-input>
    </aCard>

    <aCard title="前置、后置标签">
      <a-input
        :style="{ width: '320px' }"
        placeholder="Please enter something"
        allow-clear
      >
        <template #prepend> +86 </template>
      </a-input>
      <a-input
        :style="{ width: '320px' }"
        placeholder="Please enter something"
        allow-clear
      >
        <template #append> RMB </template>
      </a-input>
    </aCard>

    <aCard title="字数统计">
      <a-input
        :style="{ width: '320px' }"
        placeholder="Please enter something"
        :max-length="10"
        allow-clear
        show-word-limit
      />
      <a-input
        :style="{ width: '320px' }"
        placeholder="Please enter something"
        :max-length="10"
        allow-clear
        show-word-limit
      />
    </aCard>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.flex {
  height: 100vh;
  padding: 200rpx 20rpx;
  //   background: #e5e5e5;
}
:deep(.arco-card) {
  margin-bottom: 30rpx;
}

:deep(.arco-tag) {
  margin: 15rpx 10rpx;
}
</style>
